<template>
  <div class="page-container-padding">
    <div class="module-box">
      <vab-icon :icon="['fas', 'user-ninja']" class="icon"></vab-icon>
      <span class="module-name">演讲培训</span>
    </div>
    <!-- 申请表单 -->
    <div style="width: 500px">
      <el-form
        ref="lectureForm"
        :model="formData"
        :rules="formRules"
        label-width="100px"
        label-position="right"
      >
        <el-form-item prop="topic" label="讲座主题">
          <el-input
            v-model="formData.topic"
            placeholder="请输入讲座主题"
          ></el-input>
        </el-form-item>
        <el-form-item prop="target" label="讲座对象">
          <el-input
            v-model="formData.target"
            placeholder="请输入讲座对象"
          ></el-input>
        </el-form-item>
        <el-form-item prop="scale" label="讲座规模">
          <el-radio-group v-model="formData.scale">
            <el-radio label="50人及以上" value="S02"></el-radio>
            <el-radio label="少于50人" value="S03"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="line" label="讲座类型">
          <el-radio-group v-model="formData.line">
            <el-radio label="T04">线上</el-radio>
            <el-radio label="T05">线下</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否交易所" prop="isExlib">
          <el-switch v-model="formData.isExlib"></el-switch>
          <el-select
            v-show="formData.isExlib"
            v-model="formData.libName"
            placehold="交易所的，请选择哪家交易所"
            style="margin-left: 8px"
            size="mini"
          >
            <el-option label="中国金融期货交易所" value="CFE"></el-option>
            <el-option label="郑州商品交易所" value="CZC"></el-option>
            <el-option label="大连商品交易所" value="DCE"></el-option>
            <el-option label="上海期货交易所" value="SHF"></el-option>
            <el-option label="广州期货交易所" value="GFE"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="讲课时间" prop="lectureTime">
          <el-date-picker
            v-model="formData.lectureTime"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :clearable="false"
          />
        </el-form-item>
        <el-form-item label="联系方式" prop="linkMsg">
          <el-input
            v-model="formData.linkMsg"
            placeholder="请输入您的联系方式"
          ></el-input>
        </el-form-item>
        <el-form-item label="内容要求" prop="content">
          <el-input
            v-model="formData.content"
            type="textarea"
            placeholder="会议主要内容及流程，指定研究员或者品种等"
          ></el-input>
        </el-form-item>
      </el-form>
      <div style="display: flex; justify-content: flex-end">
        <el-button>取消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="toSubmit">
          确定提交
        </el-button>
      </div>
    </div>
  </div>
</template>
<script>
  import { CreateLecture } from '@/api/prodService/lectureTrain'
  import { datetimeToStr } from '@/utils/datetimeUtils'
  export default {
    data() {
      return {
        formData: {
          topic: '',
          target: '',
          scale: '',
          line: '',
          isExlib: false,
          libName: 'CFE',
          lectureTime: new Date(),
          linkMsg: '',
          content: '',
        },
        formRules: {
          topic: [
            { required: true, message: '请输入讲座主题', trigger: 'blur' },
            {
              min: 1,
              max: 200,
              message: '长度在 1 到 200 个字符',
              trigger: 'blur',
            },
          ],
          target: [
            { required: true, message: '请输入讲座对象', trigger: 'blur' },
            {
              min: 1,
              max: 200,
              message: '长度在 1 到 200 个字符',
              trigger: 'blur',
            },
          ],
          scale: [
            { required: true, message: '请选择讲座规模', trigger: 'change' },
          ],
          line: [
            { required: true, message: '请选择讲座类型', trigger: 'change' },
          ],
          isExlib: [
            {
              required: true,
              message: '请勾选是否是交易所的',
              trigger: 'change',
            },
          ],
          lectureTime: [
            { required: true, message: '请选择讲课时间', trigger: 'change' },
          ],
          linkMsg: [
            { required: true, message: '请输入联系方式', trigger: 'change' },
            {
              min: 1,
              max: 300,
              message: '长度在 1 到 300 个字符',
              trigger: 'blur',
            },
          ],
          content: [
            {
              min: 0,
              max: 500,
              message: '长度在 0 到 500 个字符',
              trigger: 'blur',
            },
          ],
        },
        submitLoading: false,
      }
    },
    mounted() {},
    methods: {
      toSubmit() {
        this.$refs.lectureForm.validate((validate) => {
          if (!validate) {
            return
          }
          const formdata = {
            topic: this.formData.topic,
            target: this.formData.target,
            scale: this.formData.scale === '50人及以上' ? 'S02' : 'S03',
            line: this.formData.line,
            exchange: this.formData.isExlib ? this.formData.libName : 'NO',
            lecture_time: datetimeToStr(this.formData.lectureTime, false, '-'),
            link_msg: this.formData.linkMsg,
            content: this.formData.content,
          }
          this.submitLoading = true
          // CreateLecture
          CreateLecture(formdata)
            .then((res) => {
              this.$baseMessage('创建数据成功.', 'success')
              this.$refs.lectureForm.resetFields()
              this.submitLoading = false
            })
            .catch((err) => {
              this.submitLoading = false
            })
        })
      },
    },
  }
</script>
<style scoped lang="scss">
  .module-box {
    padding: 4px 6px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 5px 5px 0 0;
    margin-bottom: 16px;
    .icon {
      color: #fd5516;
    }
    .module-name {
      margin-left: 10px;
    }
  }
</style>
